<template>
  <view class="container">
	  <image src="../../../static/back.png" style="width: 100%; height: 240rpx;"></image>
    <!-- 视频列表 -->
    <scroll-view class="video-list" scroll-y>
	  <view class="video-container">
		  <view class="video-item" v-for="(item, index) in videos" :key="index">
			<view class="author-info-container">
				<view class="pic">
					<!-- <image src="/static/cy-my/pic-m1.png" style="height: 4%;" mode="widthFix">
					</image> -->
					<u-avatar :src="item.user.avatarUrl"></u-avatar>
				</view>
				<view class="txt" >
					<view class="name" >
						<view class="h3">
							{{item.user.nickname}}
						</view>
						<view class="phone">
							{{item.createTime}}
						</view>
					</view>
				</view>
			</view>
			<image class="cover" :src="item.coverUrl" style="width: 100%; height: 100%; border-radius: 10px;" mode="widthFix" @click="goToPage"></image>
			<view class="text-container" @click="goToPage">
				<text class="info">审核状态：{{item.status}}</text>
				<text class="title">标题：{{item.title}}</text>
				<text class="info">简介：{{item.introduction}}</text>
				<text class="info">浏览量：{{item.visitCount}}</text>
				<text class="info">点赞量：{{item.likeCount}}</text>
				
			</view>
		  </view>
	  </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		current: 1,
		pageSize: 10,
		
		total: 0,
		prev: "-1",
		next: "-1",
      // 视频数据
      videos: [
   //      {
			// id: "string",
			// coverUrl: "/static/video-cover/1.jpg",
			// videoUrl: "string",
			// title: "这是一个视频标题",
			// introduction: "视频副标题：描述",
			// type: "string",
			// user: {
			// 	id: "string",
			// 	nickname: "string",
			// 	avatarUrl: "string"
			// },
			// visitCount: 0,
			// likeCount: 0,
			// liked: true,
			// status: "string",
			// createTime: "1h前发布"
   //      },
   //      {
   //      	id: "string",
   //      	coverUrl: "/static/video-cover/1.jpg",
   //      	videoUrl: "string",
   //      	title: "这是一个视频标题",
   //      	introduction: "视频副标题：描述",
   //      	type: "string",
   //      	user: {
   //      		id: "string",
   //      		nickname: "string",
   //      		avatarUrl: "string"
   //      	},
   //      	visitCount: 0,
   //      	likeCount: 0,
   //      	liked: true,
   //      	status: "string",
   //      	createTime: "1h前发布"
   //      },
   //      {
   //      	id: "string",
   //      	coverUrl: "/static/video-cover/1.jpg",
   //      	videoUrl: "string",
   //      	title: "这是一个视频标题",
   //      	introduction: "视频副标题：描述",
   //      	type: "string",
   //      	user: {
   //      		id: "string",
   //      		nickname: "string",
   //      		avatarUrl: "string"
   //      	},
   //      	visitCount: 0,
   //      	likeCount: 0,
   //      	liked: true,
   //      	status: "string",
   //      	createTime: "1h前发布"
   //      },
      ],
      // 当前选中的分类索引
      active: 0,
      // 搜索关键词
      keyword: ""
    };
  },
  methods: {
	requestVideoInfo(){
		return new Promise((resolve, reject) => {
			uni.request({
			  method: 'GET',
			  url: "http://47.97.114.13:8080/api/video/list/my",
			  header: {
	  			"Authorization": this.$store.state.token,
	  			// this.$store.state.token,
			  },
			  data: {
				current: this.current,
				pageSize: this.pageSize,
			  },
			  success: (res) => {
				console.log("获取个人视频列表");
				console.log(res);
				this.videos = res.data.data.list;
				console.log(this.videos);
				resolve();
			  },
			  fail: (err) => {
				reject(err);
			  }
			});
		});
	},
	  
	async onLoad() {
		console.log("渲染之前");
		await this.requestVideoInfo(); // 使用async/await语法处理异步操作
	  // 阻塞操作完成后继续渲染页面
	},
	onPullDownRefresh(){
			  console.log("刷新4页面")
			uni.request({
			  method: 'GET',
			  url: "http://47.97.114.13:8080/api/video/list/my",
			  header: {
	  			"Authorization": this.$store.state.token,
	  			// this.$store.state.token,
			  },
			  data: {
				current: this.current,
				pageSize: this.pageSize,
			  },
			  success: (res) => {
				console.log("获取个人视频列表");
				console.log(res);
				this.videos = res.data.data.list;
				console.log(this.videos);

			  },

			});
	  					  uni.stopPullDownRefresh()
		      },
    // 跳转到视频页面
    goVideo() {
      uni.navigateTo({
        url: "/pages/video-detail/video-detail"
      });
    },
	goToPage(url) {
		
		// if (!url) return;
		uni.navigateTo({
			url: url
		});
	}
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item {
   font-size :28rpx; 
   margin :10rpx; 
   color :#999999
}
.active {
   color :#ff0000
}
.video-list {
   width :95%;
   margin: 0 auto;
}
.video-container{
}


.author-info-container{
	padding-top: 3%;
	padding-bottom: 1%;
	padding-left: 1%;
	display: flex;
	justify-content: flex-start;
}
.pic {
	width : 10%;
	float: left;
}

.txt {
	/* clear: both;
	padding: 20rpx 0;
	width: 80%;
	overflow: hidden; */
	margin-left: 10px;
}

.txt .name {
	position: relative;
	display: block;
}

.txt .name .h3 {
	font-size: 26rpx;
	margin-bottom: 6rpx;
	font-weight: bold;
}

.txt .name .phone {
	height: 40rpx;
	line-height: 40rpx;
	font-size: 20rpx;
	width: 330rpx;
	background-size: 100rpx;
	color: rgb(68, 68, 68);
}



.video-item {
   width: 98%;
   margin-bottom: 2px;
}
.cover {
   width :100%; 
   height :300rpx
}
.text-container {
    display: flex;
    flex-direction: column;
    padding-left: 10rpx;
    padding-right: 10rpx;
    padding-bottom: 10rpx;
}
.title {
   font-size :28rpx; 
   padding-left :10rpx; 
   padding-right :10rpx
}
.info {
   font-size :24rpx; 
   color :#999999; 
   padding-left :10rpx; 
   padding-right :10rpx; 
   padding-bottom :10rpx
}



</style>